<template>
  <div>
    <div class="header">
      <div style="display: flex">
        <van-icon
          @click="handleBack"
          size="23"
          class="left-icon"
          name="arrow-left"
        />
        <div class="left-icon">个人信息</div>
      </div>
    </div>
    <div class="content">
      <van-uploader
        v-model="fileList"
        :after-read="onRead"
        :max-count="1"
        preview-size="200px"
        :deletable="false"
      >
        <template>
          <van-image
            class="avatar"
            width="200px"
            height="200px"
            :src="base + '/file/image/' + user.avatar"
          /> </template
      ></van-uploader>
    </div>

    <van-cell-group>
      <van-field label="用户id" v-model="upData.id" readonly />
      <van-field label="创建时间" v-model="upData.createAt" readonly />
      <van-field label="用户昵称" v-model="upData.nickname" />
      <van-field label="用户电话" v-model="upData.phone" readonly />
      <van-field label="用户地址" v-model="showAddr" @click="showPopup" />
      <van-field
        label="出生日期"
        v-model="upData.birth"
        @click="showCalendar = true"
      />
      <van-field label="性别">
        <template #input>
          <van-radio-group
            v-model="sex"
            direction="horizontal"
            @change="changeSex"
          >
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group></template
        ></van-field
      >
      <van-popup
        v-model="showArea"
        round
        position="bottom"
        :style="{ height: '50%' }"
        ><van-area
          title="地址选择"
          :area-list="areaList"
          v-model="upData.address"
          value="110101"
          @change="changeAddr"
          @cancel="cancelChoose"
          @confirm="chooseThis"
          :columns-placeholder="['省', '市', '区']"
      /></van-popup>
      <van-popup
        v-model="showCalendar"
        round
        position="bottom"
        :style="{ height: '50%' }"
        ><van-datetime-picker
          v-model="upData.birth"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          @change="changeBirth"
          @cancel="cancelChooseBirth"
          @confirm="chooseBirth"
      /></van-popup>
    </van-cell-group>
    <van-button round type="info" block @click="Dialog">
      <span>保存</span>
    </van-button>
  </div>
</template>

<script>
import MarkdownContent from "@/components/MarkdownContent";
import { BASE_RUL } from "@/utils/request";
import { FindAllComment, SaveComment } from "@/api/comment";
import { areaList } from "@vant/area-data";
import { Dialog } from "vant";
import { ChangeUser } from "@/api/user";
import axios from "axios";
import { Login, SaveUser } from "@/api/user";

export default {
  components: { MarkdownContent },

  data() {
    return {
      base: BASE_RUL,
      user: JSON.parse(localStorage.getItem("user")),
      areaList,
      upData: {},
      showArea: false,
      showAddr: "",
      showCalendar: false,
      sex: "",
      minDate: new Date(1900, 0, 1),
      fileList: [],
      signInForm: {
        phone: "",
        password: "",
      },
    };
  },

  mounted() {
    for (let obj in this.user) {
      this.upData[obj] = this.user[obj];
    }
    this.showAddr = this.upData.address;
    this.sex = this.upData.sex;
    this.signInForm.phone = this.upData.phone;
    this.signInForm.password = this.upData.password;
    this.$forceUpdate();
  },

  methods: {
    onRead() {
      let formData = new FormData();
      let file = this.fileList[0].file;
      formData.append("file", file, file.name);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(BASE_RUL + "/file/image", formData, config).then((res) => {
        if (res.status === 200) this.upData.avatar = res.data;
      });
    },
    onFileChange(ev) {
      console.log(ev.target.files[0]);
    },
    changeSex() {
      this.upData.sex = this.sex;
    },
    formatDate(date) {
      return `${date.getYear() + 1900}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showCalendar = false;
      this.upData.birth = this.formatDate(date);
    },
    cancelChoose() {
      this.showArea = false;
    },
    cancelChooseBirth() {
      this.showCalendar = false;
    },
    chooseThis() {
      this.showArea = false;
      this.showAddr =
        this.upData.address[0].name +
        "-" +
        this.upData.address[1].name +
        "-" +
        this.upData.address[2].name;
      this.upData.address = this.showAddr;
    },
    chooseBirth(date) {
      this.showCalendar = false;
      this.upData.birth = this.formatDate(date);
    },
    changeAddr(picker) {
      let val = picker.getValues();
      this.upData.address = val;
    },
    changeBirth(picker) {
      let val = picker.getValues();
      this.upData.birth = val;
    },
    showPopup() {
      this.showArea = true;
    },
    handleBack() {
      this.$router.back();
    },
    Dialog() {
      this.$dialog
        .confirm({
          message: "确认保存？",
          confirmButtonColor: "red",
        })
        .then(() => {
          ChangeUser(this.upData).then((res) => {
            if (res.status) {
              Dialog.alert({
                message: "保存成功",
              }).then(() => {
                // on close
              });
              Login(this.signInForm).then((res) => {
                if (res.status) {
                  localStorage.setItem("user", JSON.stringify(res.data));
                  localStorage.setItem("uid", res.data.id);
                  this.$router.go(0);
                }
              });
            }
          });
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
  },
};
</script>

<style scoped>
.myTable {
  width: 100%;
  border: 0ch;
}
.myTable tr td {
  width: 150px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
}
.myTable tr td.column {
  width: 30%;
}
.header {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.left-icon {
  padding-top: 23px;
  padding-left: 15px;
  margin-right: 20px;
}

.avatar {
  margin-top: 16px;
}

.des {
  font-size: 12px;
  padding-top: 13px;
  padding-left: 10px;
  letter-spacing: 1px;
  width: 47vw;
}

.des-name {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}

.des-school {
  display: flex;
  padding-top: 5px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}

.follow {
  float: right;
  margin-top: -28px;
  margin-right: 15px;
  letter-spacing: 1px;
  font-weight: bold;
  color: #81F7D8;
}

.content {
  padding: 15px;
  text-align: center;
}

.content-title {
  padding-top: 10px;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
  letter-spacing: 2px;
}

.content-time {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  padding: 20px 0;
}

.bottom-bar {
  width: 100%;
  height: 45px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  padding: 10px;
}

.bottom-bar-icon {
  transform: rotate(-90deg);
}

.s1 {
  font-size: 15px;
  letter-spacing: 2px;
  padding-left: 10px;
}

.comments-icon {
  float: right;
  padding-right: 5px;
  padding-top: 8px;
}

.comments-count {
  float: right;
  padding-right: 25px;
  color: #909399;
  letter-spacing: 1px;
  padding-top: 11px;
  font-size: 13px;
}

.popup-content {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 75vh;
}

.popup-content ::-webkit-scrollbar {
  display: none !important;
}

.popup-title {
  text-align: center;
  letter-spacing: 1px;
  font-size: 17px;
  font-weight: bold;
}

.popup-bottom {
  width: 100%;
  height: 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 99;
  background: #ffffff;
  bottom: 0;
  left: 0;
}

.popup-bottom-send {
  letter-spacing: 3px;
  float: right;
  color: #81F7D8;
  line-height: 70px;
  font-weight: 400;
  font-size: 15px;
  padding-right: 15px;
}

.bottom-bar-input {
  height: 40px;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 13px;
  margin-left: 20px;
  width: 70%;
  border: none;
}

.comments-item {
  display: flex;
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 20px;
}

.comments-item-d1 {
  color: rgba(0, 0, 0, 0.9);
}

.comments-item-d2 {
  color: rgba(0, 0, 0, 0.7);
  padding: 4px 0;
}

.comments-item-d3 {
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px;
}
</style>